/*
 * @Author: Wilbur
 * @Date: 2018-11-17 16:37:43
 * @Last Modified by: Wilbur
 * @Last Modified time: 2019-04-29 15:30:22
 */
<template>
    <div class="container task-list-container">
        <div class="operation-wrapper">
            <el-button
                type="primary"
                @click="handleRoute('createBid')"
                size="small">创建竞标</el-button>
        </div>
        <div class="content-wrapper">
            <el-row
                class="search-wrapper"
                :gutter="20">
                <el-form
                    label-position="left"
                    label-width="84px"
                    size="small">
                    <el-col
                        class="filter-item"
                        :span="24">
                        <el-radio-group
                            v-model="bidStatus"
                            @change="fnChangeTab"
                            size="medium">
                            <el-radio-button label="1">进行中</el-radio-button>
                            <el-radio-button label="2">已结束</el-radio-button>
                        </el-radio-group>
                    </el-col>
                </el-form>
            </el-row>
            <div class="table-wrapper">
                <el-table
                    :data="tableData"
                    height="100%"
                    style="width: 100%;">
                    <el-table-column
                        fixed="left"
                        header-align="left"
                        align="center"
                        :width="50"
                        label="序号">
                        <template slot-scope="scope">
                            <div class="table-index">
                                {{ scope.$index + 1 }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed="left"
                        prop="title"
                        show-overflow-tooltip
                        label="赞助名称"/>
                    <el-table-column
                        fixed="left"
                        prop="title"
                        show-overflow-tooltip
                        label="企业名称">
                        <template slot-scope="scope">

                            <a
                                v-if="scope.row.hire_no != ''"
                                href="javascript:;"
                                @click="handleRoute('hireList', { hire_no: scope.row.hire_no })"
                                style="color: #409EFF;">{{ scope.row.hire_company_name }}</a>
                            <span v-if="scope.row.hire_no == ''">总后台设定</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="start_time"
                        :min-width="100"
                        label="开始时间">
                        <template slot-scope="scope">
                            {{ scope.row.start_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="end_time"
                        :min-width="100"
                        label="截止时间">
                        <template slot-scope="scope">
                            {{ scope.row.end_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="view_count"
                        show-overflow-tooltip
                        label="浏览量"/>
                    <el-table-column
                        prop="accept_count"
                        show-overflow-tooltip
                        label="竞标人数">
                        <template slot-scope="scope">
                            {{ scope.row.accept_count }}
                            <el-button
                                type="text"
                                style="margin-left:5px;"
                                @click="handleRoute('bidMember', { bid_no: scope.row.bid_no })"
                                :disabled="scope.row.accept_count == 0 ? true : false">查看</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="status"
                        show-overflow-tooltip
                        label="审核状态">
                        <template slot-scope="scope">
                            <template v-if="scope.row.verify == 0">待审核</template>
                            <template v-if="scope.row.verify == 1">审核不通过</template>
                            <template v-if="scope.row.verify == 2">审核通过</template>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="status"
                        show-overflow-tooltip
                        label="上架状态">
                        <template slot-scope="scope">
                            <template v-if="scope.row.status == 1">正常</template>
                            <template v-if="scope.row.status == 0">已下架</template>
                        </template>
                    </el-table-column>

                    <el-table-column
                        prop="date"
                        label="操作"
                        fixed="right"
                        :width="240">
                        <template slot-scope="scope">
                            <div>
                                <el-button
                                    type="text"
                                    @click="handleRoute('createBid', { bid_no: scope.row.bid_no })">编辑</el-button>
                                <el-button
                                    type="text"
                                    style="margin-left:10px;"
                                    @click="fnChangeBidStatus(scope.row.bid_no, scope.row.status)">
                                    <template v-if="scope.row.status == 1">下架</template>
                                    <template v-if="scope.row.status == 0">上架</template>
                                </el-button>

                                <el-button
                                    type="text"
                                    style="margin-left:10px;"
                                    v-if="scope.row.hire_no != ''"
                                    :disabled="scope.row.verify == 0 ? false : true"
                                    @click="fnChangeVerifyStatus(scope.row.bid_no, 2)">
                                    通过
                                </el-button>
                                <el-button
                                    type="text"
                                    style="margin-left:10px;"
                                    v-if="scope.row.hire_no != ''"
                                    :disabled="scope.row.verify == 0 ? false : true"
                                    @click="fnChangeVerifyStatus(scope.row.bid_no, 1)">
                                    不通过
                                </el-button>
                                <el-button
                                    @click="handleRoute('memberNotification', { bid_no: scope.row.bid_no })"
                                    type="text">通知</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination-wrapper clearfix">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData" />
            </div>
        </div>
    </div>
</template>

<script>
import Clipboard from 'clipboard';
export default {
    data() {
        return {
            authResult: {},
            bidStatus: 1,
            taskTitleList: [],
            tableData: [],
            filterData: {
                title: ''
            },
            sortData: {
                field: 0,
                by: 1
            },
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            targetLink: '',//链接
            shortLink: '', //短链接
            dialogLinkVisible: false,
            baseUrl: '',
            mobileUrl: '',
            escape: escape,
            sessionTicket: localStorage.getItem('sessionTicket')
        };
    },
    created() {
        this.authResult = this.$route.meta.authResult;
        this.baseUrl = this.$baseUrl;
        this.mobileUrl = location.host == 'phaadmin.wxhand.com' ? 'http://class.zsdx.cn' : 'http://task.wxhand.com';
        this.$store.commit('SET_HEADER', [
            {
                title: "广告系统",
            },
            {
                title: '竞标列表'
            }
        ]);
        this.getTableData();
    },
    mounted() {
    },
    methods: {
        fnGoMembersList(bid_no) {

        },
        fnChangeTab() {
            this.getTableData(1);
        },
        fnSetBidVerifyStatus(bid_no, verify, reason) {
            this.$post('/wei4/bid%5Cverify', {
                bid_no: bid_no,
                verify: verify,
                verify_fail_reason: reason
            }, resp => {
                if (resp.code == 1) {
                    this.getTableData(this.page.now_page);
                    this.$message({
                        type: 'success',
                        message: '操作成功',
                        center: true
                    });
                }
            });
        },
        fnChangeVerifyStatus(bid_no, status) {
            if(status == 2) {
                this.$confirm('是否通过此竞标?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.fnSetBidVerifyStatus(bid_no, status, '');
                }).catch(() => {
                });
            }else{
                this.$prompt('请输入审核失败原因', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /\S/,
                    inputErrorMessage: '请输入审核失败原因'
                }).then(({ value }) => {
                    this.fnSetBidVerifyStatus(bid_no, status, value);
                }).catch(() => {
                });
            }
        },
        fnChangeBidStatus(bid_no, status) {
            this.$post('/wei4/bid%5Cset_status', {
                bid_no: bid_no,
                status: status == 1 ? 0 : 1
            }, resp => {
                if (resp.code == 1) {
                    this.getTableData(this.page.now_page);
                    this.$message({
                        type: 'success',
                        message: '操作成功',
                        center: true
                    });
                }
            });
        },
        /**
         * 获取表格数据
         */
        getTableData(page) {
            this.$post('/wei4/bid%5Cget_list', {
                page_id: page || this.page.now_page,
                bid_status: this.bidStatus
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * 跳转页面
         */
        handleRoute(name, query) {
            let obj = {
                name
            };

            if (query) {
                obj.query = query;
            }

            this.$router.push(obj);
        },

        /**
         * 列表渲染辅助函数：列表项为空处理
         */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.operation-wrapper {
    display: flex;
    flex-direction: row-reverse;
    padding: 12px 23px;
    background-color: #fff;

    .el-button {
        margin-left: 10px;
    }
}
.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 15px;
    overflow: hidden;
}
.search-wrapper {
    padding: 15px;
    background-color: #fff;
}
.filter-item {
    .el-form-item {
        margin-bottom: 0;
        white-space: nowrap;
    }
    .el-input {
        width: auto;
        vertical-align: middle;
    }
    .el-button {
        margin-left: 15px;
        vertical-align: middle;
    }
}
.table-wrapper {
    flex: 1;
    background-color: #fff;

    .el-button {
        padding: 0;
    }
    .icon-bianji{
        font-size: 14px;
        color: #B9B9B9;
        cursor: pointer;
    }
    .btn-delete {
        color: #fd4d32;
        &.is-disabled {
            color: #c0c4cc;
            cursor: not-allowed;
        }
    }
    .submit-config-item {
        display: inline-block;
        position: relative;
        padding-right: 10px;
        font-size: 14px;

        & + .submit-config-item {
            padding-left: 10px;
            &::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 0;
                width: 1px;
                height: 14px;
                transform: translate(0, -50%);
                background-color: #d8d8d8;
            }
        }

        .num {
            vertical-align: middle;
        }
        .iconfont {
            font-size: 16px;
            color: #b9b9b9;
            vertical-align: middle;
        }

        .icon-tupian {
            font-size: 20px;
        }
    }
}
.pagination-wrapper {
    padding-top: 10px;
    .el-pagination {
        float: right;
        padding: 0;
        background-color: transparent;
    }
}
.dialog-link{
    & + .dialog-link{
        margin-top: 20px;
    }
    .link-label{
        font-weight: 500;
        margin-right: 20px;
    }
    .link-value{
    }
}
</style>
<style lang="less">
.task-list-container {
    tbody {
        .cell {
            display: flex;
            align-items: center;
            height: 48px;
        }
    }
}
.task-list-preview-popover {
    min-width: auto!important;
    width: 120px!important;
    height: 120px;
    padding: 8px!important;
}
.sort-dialog{
    width: 270px!important;
}
</style>
